<template>
  <Simplebar
    class="scrollbarWrap"
    :class="{ tabsSytle: !themeStore.multiTabs }"
    data-simplebar-auto-hide="false"
  >
    <a-layout-content
      :style="{
        padding: '20px',
        overflow: 'initial',
      }"
    >
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" v-if="flag" />
        </transition>
      </router-view>
    </a-layout-content>
  </Simplebar>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import Simplebar from "simplebar-vue";
import "simplebar-vue/dist/simplebar.min.css";
import { useRefreshStore } from "@/stores/models/refresh";
import { useThemeStore } from "@/stores/models/theme";

const themeStore = useThemeStore();
const useRefresh = useRefreshStore();
//控制当前组件是否销毁重建
const flag = ref(true);
//监听pina中存储的refresh是否改变，若改变则说明刷新
watch(
  () => useRefresh.refresh,
  () => {
    //点击刷新按钮，路由组件销毁
    flag.value = false;
    //紧接着又重新创建组件，相当于重新发送请求
    nextTick(() => {
      flag.value = true;
    });
  }
);
</script>

<style scoped lang='scss'>
.scrollbarWrap {
  height: calc(100vh - $header-height);
  width: 100%;

  &.tabsSytle {
    height: calc(100vh - $base-header-height);
    transition: all 0.3s;
  }
}

// 滚动条背景颜色
:deep(.simplebar-scrollbar::before) {
  display: none;
  // background-color: $simplebar-scrollbar-backColor;
}

// 滚动条宽度
:deep(.simplebar-vertical) {
  width: 10px;
}

.fade-enter-active {
  /* 增加了过渡的持续时间以使其更温和 */
  transition: opacity 0.7s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 更平缓的缓动函数 */
}

.fade-enter-from {
  opacity: 0;
  transform: scale(0.7);
  /* 从0.5开始缩放，使起始状态部分可见 */
  transform-origin: center;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
  /* 缩放到1，即正常尺寸 */
  transform-origin: center;
}
</style>